<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="10">
        <el-card class="box-card">
          <div class="user-info">
            <div><img src="../assets/cx.jpg" class="img-user" /></div>
            <div>
              <div><b>{{username}}</b></div>
              <div>
                <small style="color: rgb(133, 133, 133)">{{user}}</small>
              </div>
            </div>
          </div>
          <div class="user-info-bottom">
            <p>
              <small style="color: rgb(133, 133, 133)">本次登录时间：</small
              ><small style="margin-left: 20px">{{date}}</small>
            </p>
            <p>
              <small style="color: rgb(133, 133, 133)">本次登录地点：</small
              ><small style="margin-left: 20px">武汉</small>
            </p>
          </div>
        </el-card>
        <el-card class="table-data">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              v-for="(val, key) in columnName"
              :key="key"
              :prop="key"
              :label="val"
              width="110"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="14">
        <div class="count-data">
          <el-card
            class="count-data-item"
            v-for="item in countData"
            :key="item.name"
            :body-style="{ padding: 0 }"
          >
            <i
              class="icon"
              :class="'el-icon-' + item.icon"
              :style="{ backgroundColor: item.color }"
            ></i>
            <div class="sum">
              <strong>￥{{ item.value }}</strong
              ><br /><small style="font-size: 12px; color: gray">{{
                item.name
              }}</small>
            </div>
          </el-card>
        </div>
        <div style="width: 750px">
          <el-card class="line-chart">
            <div style="height: 250px" ref="line"></div>
          </el-card>
          <el-card
            class="columnAndCake-chart"
            style="height: 200px"
            ref="pie"
          ></el-card>
          <el-card
            class="columnAndCake-chart"
            style="height: 200px"
            ref="bar"
          ></el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getData } from "../api/data";
import {mapState} from 'vuex'
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [],
      columnName: {
        name: "品牌",
        todayBuy: "今日销量",
        monthBuy: "本月销量",
        totalBuy: "总销量",
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  mounted() {
    getData().then((res) => {
      const { code, data } = res.data;
      if (code === 20000) {
        //表格数据
        this.tableData = data.tableData;

        //生成拆线图
        const lineObj = echarts.init(this.$refs.line);
        const orderData = data.orderData.data;
        const orderDate = data.orderData.date;
        const keyArray = Object.keys(orderData[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: orderData.map((value) => {
              return value[key];
            }),
            type: "line",
          });
        });
        var optionLine = {
          tooltip: {},
          legend: {
            data: keyArray,
          },
          xAxis: {
            data: orderDate,
          },
          yAxis: {},
          series,
        };
        // 使用刚指定的配置项和数据显示图表。
        lineObj.setOption(optionLine);
        //生成拆线图结束

        //生成饼图
        const picObj = echarts.init(this.$refs.pie.$el);
        const picData = data.videoData;
        var optionPie = {
          title: {
            text: "手机销量",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: picData,
            },
          ],
        };
        picObj.setOption(optionPie);
        //生成饼图结束

        //生成柱状图
        const barObj = echarts.init(this.$refs.bar.$el);
        const barData = data.userData.map((item) => item.active);
        const barDataNew = data.userData.map((item) => item.new);
        const barDate = data.userData.map((item) => item.date);
        var optionBar = {
          tooltip: {},
          xAxis: {
            type: "category",
            data: barDate,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "cx",
              data: barData,
              type: "bar",
            },
            {
              name: "new",
              type: "bar",
              data: barDataNew,
            },
          ],
        };
        barObj.setOption(optionBar);
      }
    });
  },
  computed:{
    ...mapState('user',['user', 'username', 'date'])
  }
};
</script>

<style scoped>
.box-card {
  width: 500px;
}
.table-data {
  margin-top: 20px;
  width: 500px;
}
.img-user {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.user-info {
  display: flex;
  border-bottom: 2px solid gray;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.user-info > div {
  width: 80px;
  height: 80px;
}
.user-info > div:nth-of-type(2) {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user-info-bottom {
  margin-top: 20px;
}
.count-data {
  display: flex;
  flex-wrap: wrap;
  width: 720px;
}
.count-data-item {
  margin: 0 12px 10px 0;
  width: 226px;
  height: 50px;
}
.count-data .count-data-item .icon {
  float: left;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
}
.count-data .count-data-item .sum {
  float: left;
  padding: 5px 10px;
}
.line-chart {
  width: 708px;
  height: 251px;
}
.columnAndCake-chart {
  float: left;
  margin: 15px 18px 0 0;
  width: 345px;
  height: 200px;
}
</style>